<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	div{
		width: 500px;
		margin: 10px auto;
		text-align: center;
	}
	ul{
	overflow: hidden;
	list-style: none;
	}
	ul li{
		width: 100px;
		height: 100px;
		background-image: url("./image/star-off.png");
		float: left;
	}
	ul li.special{
		background-image: url("./image/1.jpg");
	}
</style>	
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>
<p>您的评分为：<span id="span">0</span> 颗星</p>

</div>
<script>
		var lis=document.getElementsByTagName('li');
		var span=document.getElementById("span");//找到id
		
		

	for(let index in lis){
		
		let num=Number(index)+1;
		// lis[index].onclick=function(){
			lis[index].onmouseover=function(){
			init();
			// var num=Number(index)+1;
			for(let i=0;i<=index;i++){
				//定义 星星
				// // var num=index+1;
				// var num=Number(index)+1;
				
				lis[i].classList.add("special");
				span.innerHTML=num;
			}
		}
		//点击事件
		lis[index].onclick=function(){
		// var num=Number(index)+1;
		alert("您的评分为："+num+" 颗星哟")
		}
	}
	//全灭再重新点
	function init(){
		for(let li of lis){
			li.classList.remove("special");
		}
	}

</script>
</body>
</html>
